<template>
  <div class="common-layout">
    <!-- title query -->
    <title-section  :titleName="'批量报工'" :queryPlaceholder="'批量报工单编码'" @query-change="queryChange">
        <!-- <template #queryCom>
            <el-select v-model="form.ProcessName" clearable filterable placeholder="请输入工序名称"
                style="width: 240px;font-size: 15px; padding: 0 15px;">
                <el-option v-for="item in processOptions" :key="item.id" :label="item.processName"
                    :value="item.processName" />
            </el-select>
        </template> -->
        <template #btnCom>
        <el-button type="primary" @click="addChange">
          <i class="el-icon-plus"></i>添加
        </el-button>
      </template>
    </title-section>
    <!-- table -->
    <div class="table-info mes-table">
      <data-table
        ref="dataTableRef"
        :tableKey="tableKey"
        :isOperation="false"
        :isSelection="false"
        @sort-change="sortChange"
        @table-selection-change="tableSelectionChange"
      >
        <template #batchReportCode="{ row }">
          <el-link type="primary" @click="detailChange(row)">{{ row.batchReportCode || '--' }}</el-link>
        </template>
        <template #workOrderCode="{ row }">
          <span>{{ row.workOrderCode || '--' }} | {{ row.inventoryName }}</span>
        </template>
        <template #status="{ row }">
          <span v-if="row.status === '1'" type="success">未开始</span>
          <span v-if="row.status === '2'" type="warning">进行中</span>
          <span v-if="row.status === '3'" type="danger">已完成</span>
          <span v-if="row.status === '4'" type="danger">已撤回</span>
          <span v-if="row.status === '5'" type="danger">已取消</span>
        </template>
      </data-table>
      <!-- 分页 -->
      <div class="table-pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :page-sizes="[15, 30, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 添加 -->
    <dialog-com
      ref="addDialogComRef"
      :title="addTitle"
      :isShowConfirmBtn="isShowConfirmBtn"
      :isNeedHeightCss="false"
      :width="'90%'"
      class="add-dialog"
      @confirm-change="confirmChange"
      @close-change="closeChange"
    >
      <template #content>
        <add-form ref="addFormRef" @pass-verification-change="okChange"></add-form>
      </template>
    </dialog-com>

    <!-- 详情 -->
    <dialog-com
      ref="detailDialogComRef"
      :title="'报工详情'"
      :isShowConfirmBtn="false"
      :width="'90%'"
      class="add-dialog"
      @close-change="closeDetailChange"
    >
      <template #content>
        <div style="margin-bottom: 10px;">报工时间：{{ detailInfo.batchReportDate || '--' }}</div>
        <data-table
          ref="detailDataTableRef"
          :tableKey="detailTableKey"
          :isOperation="false"
          :isSelection="false"
          :isNumberColumn="false"
        >
          <template #workOrderCode="{ row }">
            <span>{{ row.workOrderCode || '--' }} | {{ row.inventoryName }}</span>
          </template>
        </data-table>
      </template>
    </dialog-com>
  </div>
</template>

<script>
import TitleSection from "../../componentsNew/TitleSection.vue";
import DataTable from "../../componentsNew/DataTable.vue";
import DialogCom from "../../componentsNew/DialogCom.vue";
import AddForm from "./ReportWorkBatchCom/AddForm..vue"

import { myMethod } from "../../uitils/reportWorkBatch.js";
export default {
  components: {
    TitleSection,
    DataTable,
    DialogCom,
    AddForm,
  },
  data() {
    return {
      processOptions: [],
      currentPage: 1,
      pageSize: 15,
      totalPage: 0,
      tableKey: [
        { value: "batchReportCode", name: "批量报工编码", minWidth: "180",slot: true, },
        { value: "workOrderCode",name: "工单",minWidth: "250",slot: true,},
        { value: "processName", name: "工序名称", minWidth: "160", },
        { value: "inventoryName", name: "存货名称", minWidth: "150", },
        { value: "inventoryCode", name: "存货编号", minWidth: "160", },
        { value: "specificationModel", name: "产品规格", minWidth: "100", },
        { value: "teamName", name: "班组名称", minWidth: "100", },
        { value: "vendName", name: "设备名称", minWidth: "100", },
        { value: "unitName", name: "单位", minWidth: "100", algin: 'center' },
        { value: "reportQty", name: "报工数", minWidth: "100", algin: 'center' },
        { value: "goodQty", name: "良品数", minWidth: "100", algin: 'center' },
        { value: "noGoodQty", name: "不良品数", minWidth: "100", algin: 'center' },
        { value: "employeesName", name: "生产人员", minWidth: "100", },
        { value: "batchReportDate", name: "批量报工日期", minWidth: "160", },
        { value: "createDate", name: "创建时间", minWidth: "160", },
        { value: "creator", name: "创建人", minWidth: "120", algin: 'center' },
        { value: "startDate", name: "开始时间", minWidth: "160", },
        { value: "endDate", name: "结束时间", minWidth: "160", },
      ],
      tableSelection: [],
      form: {},
      isShowConfirmBtn: true,
      addTitle: '批量报工',
      detailInfo: {
        batchReportDate: '',
        batchReportWorkOrderInfoLists: []
      },
      detailTableKey: [
        { value: "batchReportCode", name: "报工编码", minWidth: "180" },
        { value: "workOrderCode",name: "工单",minWidth: "250",slot: true,},
        { value: "processName", name: "工序名称", minWidth: "150", },
        { value: "inventoryName", name: "存货名称", minWidth: "150", },
        { value: "inventoryCode", name: "存货编号", minWidth: "160", },
        { value: "specificationModel", name: "产品规格", minWidth: "100", },
        { value: "teamName", name: "班组名称", minWidth: "100", },
        { value: "vendName", name: "设备名称", minWidth: "100", },
        { value: "unitName", name: "单位", minWidth: "100", },
        { value: "reportQty", name: "报工数", minWidth: "100", },
        { value: "goodQty", name: "良品数", minWidth: "100", },
        { value: "noGoodQty", name: "不良品数", minWidth: "100", },
        { value: "employeesName", name: "生产人员", minWidth: "100", },
        { value: "batchReportDate", name: "报工日期", minWidth: "160", },
        { value: "createDate", name: "创建时间", minWidth: "160", },
        { value: "creator", name: "创建人", minWidth: "120", },
        { value: "startDate", name: "开始时间", minWidth: "160", },
        { value: "endDate", name: "结束时间", minWidth: "160", },
      ]
    };
  },
  created() {},
  mounted() {
    this.getTableData();
  },
  methods: {
    ...myMethod,
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/index.less";
</style>
